<div class="shrink-0 flex justify-between items-center pl-4 pr-3 py-3">
  <div class="flex-1 text-base font-semibold text-gray-900 truncate">{{ 'PAC.Xpert.Test' | translate: { Default: 'Test' } }} {{ knowledgebase().name || ('PAC.Xpert.Knowledgebase' | translate: { Default: 'Knowledgebase' }) }}</div>
  <div class="ml-2 shrink-0 p-1 cursor-pointer action-btn rounded-lg"
    (click)="onClose()">
    <i class="ri-close-line w-4 h-4 text-base leading-4"></i>
  </div>
</div>

<div class="h-0 grow overflow-y-auto px-4">
  <div class="space-y-4">
    <div>
      <div class="space-y-2">
        <div class="undefined">
          <div class="h-6 mb-1 flex items-center gap-1 text-text-secondary system-sm-semibold">
            <div class="truncate">{{'PAC.Xpert.Query' | translate: {Default: 'Query'} }}</div>
          </div>
          <div class="grow">
            <textarea
              class="w-full px-3 py-1 text-sm leading-[18px] text-gray-900 border-0 rounded-lg grow h-[120px] bg-gray-50 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
              [placeholder]="'PAC.Xpert.PleaseEnter' | translate: {Default: 'Please enter'} "
              [(ngModel)]="query"
            ></textarea>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="mt-4 flex justify-between space-x-2">
    <button type="button" class="btn disabled:btn-disabled btn-primary h-10 w-0 grow space-x-2 justify-center"
      [disabled]="running()"
      (click)="onTest()">
      {{ 'PAC.Xpert.Test' | translate: { Default: 'Test' } }}
    </button>

    @if (running()) {
      <button type="button" class="btn disabled:btn-disabled h-10 btn-danger pressable"
        (click)="stopTest()"
      >
        <div class="w-full text-center">
          <i class="ri-stop-line"></i>
          {{ 'PAC.Xpert.Stop' | translate: { Default: 'Stop' } }}
        </div>
      </button>
    }
  </div>

  <div class="flex flex-col items-stretch gap-4 mt-4 pb-4">
    @for (item of docs(); track $index) {
      <div class="group rounded-xl border border-solid border-transparent cursor-pointer overflow-hidden hover:shadow-lg
                  bg-gray-50 hover:bg-white hover:border-gray-200"
        (click)="openChunk(item)"
      >
        <div class="h-[140px] p-4 overflow-hidden text-ellipsis text-sm font-normal text-text-secondary">{{item.doc.pageContent}}</div>

        <div class="w-full h-[1px] bg-gray-100"></div>
        <div class="w-full bg-gray-50 group-hover:bg-white p-2">
          <div class="relative flex items-center w-full pb-1">
            <div class="flex items-center justify-start flex-1 gap-2 w-full text-sm text-text-tertiary group-hover:text-text-primary">
              <div class="font-semibold px-2 border border-solid border-gray-100 rounded-lg shadow-sm bg-gray-50">{{(1-item.score) | number: '0.2-2'}}</div>
              <div class=" px-2 border border-solid border-gray-100 rounded-lg shadow-sm bg-gray-50">{{item.doc.metadata.blobType}}</div>
              @if (item.doc.metadata.loc?.lines) {
                <div class=" px-2 border border-solid border-gray-100 rounded-lg shadow-sm bg-gray-50">Lines: {{item.doc.metadata.loc.lines.from}}-{{item.doc.metadata.loc.lines.to}}</div>
              }
              <span class="px-2 font-semibold ml-1 text-xs text-gray-700 overflow-hidden whitespace-nowrap text-ellipsis">
              </span>
            </div>
          </div>
        </div>
      </div>
    }
  </div>
</div>
